<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  bgcColorIndex: {
    type: Number,
    required: true,
    default: 0
  }
})

const colorMap = computed(() => [
  { backgroundColor: '#FFCA4231' },
  { backgroundColor: '#88FF4231' },
  { backgroundColor: '#42FF9C31' },
  { backgroundColor: '#4274FF31' },
  { backgroundColor: '#FF42CD31' }
])

const backgroundColor = computed(() =>
  colorMap.value[props.bgcColorIndex]?.backgroundColor || '#FFFFFF'
)

const boxShadow = computed(() =>
  `0px 2px 7px -1px ${backgroundColor.value}`
)
</script>

<template>
  <div class="select-box" :style="{ backgroundColor, boxShadow }">
    <h4 class="select-box_type">
      <slot name="type"></slot>
    </h4>
    <h4 class="select-box_translation">
      <slot name="translation"></slot>
    </h4>
  </div>
</template>

<style scoped lang="scss">
.select-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16vh;
  width: 18vw;
  border-radius: 8px;
  background-color: aliceblue;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &:hover {
    cursor: pointer;
    transform: scale(1.1);
  }

  &:active {
    transform: scale(0.95);
  }

  transition: all 0.2s ease-in-out;
}
</style>
